<template>
  <div>
    <newHeader></newHeader>
    <swiperComponent></swiperComponent>
    <div class="m-content wrapbox clearfix">
      <div class="m-leftbar">

        <!-- S 我的粉丝-->
        <div class="m-follower">
          <div class="hd">
            <h2 class="sider-title">我的关注</h2>
          </div>

          <div class="bd">
            <ul class="list">
              <li v-for="item in records">
                <div class="m">
                  <span class="pic">
                     <img v-show="item.picUrl==null" src="../images/img01.png" width="80" height="80"/>
                     <img v-show="item.picUrl!=null" :src="item.picUrl" width="80" height="80"/>
                  </span>
                  <p class="name">{{item.nickname}}</p>
                  <p class="time">{{item.fans}} 粉丝</p>
                  <!--<a class="addfocus" v-show="!other"><p @click="fcous(item.userId)">+ 关注</p></a>-->
                  <p class="txt">{{item.profile}} </p>
                </div>
              </li>

            </ul>

            <div class="m-nodata" v-show="records.length==0">
              <p class="pic">
                <span>空</span>
              </p>
              <p class="t">您还没有任何粉丝~</p>
            </div>
          </div>


        </div>
        <!-- E 我的粉丝-->

        <!-- s 翻页 -->
        <vue-paginate-al :nextText="paginate.nextText" :prevText="paginate.prevText" :totalPage="totalPage"
                         :currentPage="currentPage" @btnClick="getPage"></vue-paginate-al>
        <!-- e 翻页 -->

      </div>


      <div class="m-rightbar">
        <!-- S 侧边栏 -->
        <div class="m-player">
          <p class="pic">
            <img v-show="mysle.picUrl==null" src="../images/img01.png" width="80" height="80"/>
            <img v-show="mysle.picUrl!=null" :src="mysle.picUrl" width="80" height="80"/>
          </p>
          <p class="name">{{mysle.nickname}}</p>
          <div class="numbox">
            <router-link v-bind="{to:'/MyFollow/'+ usId}" href="javascript:;" class="gz">
              <p>关注</p>
              <p>{{mysle.follows}}</p>
            </router-link>
            <router-link v-bind="{to:'/MyFans/'+ usId}" href="javascript:;" class="fc">
              <p>粉丝</p>
              <p>{{mysle.fans}}</p>
            </router-link>
          </div>
        </div>
        <!-- E 侧边栏 -->

      </div>


    </div>
  </div>
</template>

<script>
  import newHeader from '@/components/NewHeader'
  import bottom from '@/components/Bottom'
  import swiperComponent from '@/components/SSwiper'
  import VuePaginateAl from 'vue-paginate-al'
  import {mapGetters} from 'vuex'

  export default {
    components: {
      bottom,
      newHeader,
      swiperComponent,
      VuePaginateAl,


    },
    data() {
      return {
        usId: '',
        other: false,
        paginate: {
          nextText: '下一页',
          prevText: '上一页',

        },
        currentPage: 1,
        totalPage: 0,
        records: [],
        mysle: {},
      }
    },
    computed: {
      ...mapGetters({
        isLogin: 'isLogin',
        username: 'username',
        photo: 'photo',
        token: 'token',
        userId: 'userId',
        headerCss: 'headerCss'
      })
    },
    mounted() {
      if (this.$route.params.id == this.userId) {
        this.other = false
      } else {
        this.other = true
      }
      console.log(this.$route.params.id)
      console.log(this.userId)
      this.usId = this.$route.params.id //拿到通过路由传过来的ID
      this.query()
      this.getMysel()
      this.$store.dispatch('updateHeadStatu', true)
    },
    methods: {
      fcous(id) {
        let params = {
          "optType": 1,
          "type": 1,
          "value": id
        }
        this.$post('/userRef/saveUserRef', params).then(response => {
          this.$check(response)
          this.$message.success('关注成功');
        })
        this.getMysel()
      },
      getMysel() {
        this.$fetch('/user/getBaseUserInfo' + '?userId=' + this.usId).then(response => {
          this.$check(response)
          this.mysle = response.data
        })
      },
      getPage(n) {
        this.currentPage = n
        this.query()
      },
      query() {
        let params = {
          "condition": {"userId": this.usId, 'type': 'fans'},
          "current": this.currentPage,
          "pages": 0,
          "size": 10,
          "total": 0
        }
        this.$post('/userRef/getUserFlowAndFansList', params).then(response => {
          this.$check(response)
          this.totalPage = response.data.pages
          this.currentPage = response.data.current
          this.records = response.data.records
        })
      }

    }
  }
</script>

<style>
</style>
